<template>
  <view class="login-container">
    <!-- 自定义导航栏 -->
    <u-navbar 
      :is-back="false" 
      title=""
      :background="{ background: 'transparent' }"
      :title-style="{ color: 'transparent' }"
    />
    
    <!-- 顶部装饰 -->
    <view class="header-section">
      <view class="logo-area">
        <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
        <text class="app-name">家教平台</text>
        <text class="slogan">连接知识，成就未来</text>
      </view>
    </view>
    
    <!-- 登录表单 -->
    <view class="form-section">
      <view class="form-container card">
        <view class="form-title">
          <text class="title-text">欢迎回来</text>
          <text class="subtitle-text">请输入您的账号信息</text>
        </view>
        
        <u-form :model="form" ref="formRef" label-width="0">
          <u-form-item prop="mobile">
            <u-input
              v-model="form.mobile"
              placeholder="请输入手机号"
              type="number"
              maxlength="11"
              :border="false"
              :custom-style="inputStyle"
            >
              <template #prefix>
                <u-icon name="phone" size="20" color="#999"></u-icon>
              </template>
            </u-input>
          </u-form-item>
          
          <u-form-item prop="password">
            <u-input
              v-model="form.password"
              placeholder="请输入密码"
              :password="!showPassword"
              :border="false"
              :custom-style="inputStyle"
            >
              <template #prefix>
                <u-icon name="lock" size="20" color="#999"></u-icon>
              </template>
              <template #suffix>
                <u-icon 
                  :name="showPassword ? 'eye-off' : 'eye'" 
                  size="20" 
                  color="#999"
                  @click="showPassword = !showPassword"
                ></u-icon>
              </template>
            </u-input>
          </u-form-item>
        </u-form>
        
        <!-- 忘记密码 -->
        <view class="forgot-password">
          <text @click="goToForgotPassword">忘记密码？</text>
        </view>
        
        <!-- 登录按钮 -->
        <u-button
          type="primary"
          :loading="loading"
          :custom-style="buttonStyle"
          @click="handleLogin"
        >
          登录
        </u-button>
        
        <!-- 注册链接 -->
        <view class="register-link">
          <text>还没有账号？</text>
          <text class="link-text" @click="goToRegister">立即注册</text>
        </view>
      </view>
    </view>
    
    <!-- 底部装饰 -->
    <view class="footer-section">
      <text class="copyright">© 2024 家教平台 All Rights Reserved</text>
    </view>
  </view>
</template>

<script>
import { login } from '@/api/auth'
import { setToken, setUserInfo } from '@/utils/auth'

export default {
  data() {
    return {
      form: {
        mobile: '',
        password: ''
      },
      showPassword: false,
      loading: false,
      inputStyle: {
        backgroundColor: '#f8f9fa',
        borderRadius: '12rpx',
        padding: '24rpx',
        marginBottom: '20rpx'
      },
      buttonStyle: {
        borderRadius: '50rpx',
        height: '90rpx',
        marginTop: '40rpx',
        background: 'linear-gradient(45deg, #5daf34, #3cc51f)'
      }
    }
  },
  
  onLoad() {
    // 页面加载时的逻辑
  },
  
  methods: {
    // 处理登录
    async handleLogin() {
      if (!this.validateForm()) {
        return
      }
      
      this.loading = true
      
      try {
        const response = await login(this.form)
        const { token, userId, username, roles } = response.data
        
        // 保存登录信息
        setToken(token)
        setUserInfo({
          userId,
          username,
          roles,
          mobile: this.form.mobile
        })
        
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })
        
        // 跳转到首页
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/index/index'
          })
        }, 1000)
        
      } catch (error) {
        console.error('登录失败:', error)
      } finally {
        this.loading = false
      }
    },
    
    // 表单验证
    validateForm() {
      if (!this.form.mobile) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return false
      }
      
      if (!/^1[3-9]\d{9}$/.test(this.form.mobile)) {
        uni.showToast({
          title: '手机号格式不正确',
          icon: 'none'
        })
        return false
      }
      
      if (!this.form.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        })
        return false
      }
      
      if (this.form.password.length < 6) {
        uni.showToast({
          title: '密码长度不能少于6位',
          icon: 'none'
        })
        return false
      }
      
      return true
    },
    
    // 跳转到注册页
    goToRegister() {
      uni.navigateTo({
        url: '/pages/auth/register'
      })
    },
    
    // 跳转到忘记密码页
    goToForgotPassword() {
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="90" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
  }
}

.header-section {
  padding-top: 100rpx;
  text-align: center;
  
  .logo-area {
    .logo {
      width: 120rpx;
      height: 120rpx;
      margin-bottom: 20rpx;
    }
    
    .app-name {
      display: block;
      font-size: 48rpx;
      font-weight: bold;
      color: white;
      margin-bottom: 10rpx;
    }
    
    .slogan {
      display: block;
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.8);
    }
  }
}

.form-section {
  margin-top: 80rpx;
  padding: 0 40rpx;
  
  .form-container {
    padding: 60rpx 40rpx;
    border-radius: 30rpx;
    background: white;
    box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
    
    .form-title {
      text-align: center;
      margin-bottom: 60rpx;
      
      .title-text {
        display: block;
        font-size: 40rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
      }
      
      .subtitle-text {
        display: block;
        font-size: 28rpx;
        color: #666;
      }
    }
    
    .forgot-password {
      text-align: right;
      margin-top: 20rpx;
      
      text {
        font-size: 26rpx;
        color: #3cc51f;
      }
    }
    
    .register-link {
      text-align: center;
      margin-top: 40rpx;
      font-size: 28rpx;
      color: #666;
      
      .link-text {
        color: #3cc51f;
        margin-left: 10rpx;
      }
    }
  }
}

.footer-section {
  position: absolute;
  bottom: 60rpx;
  left: 0;
  right: 0;
  text-align: center;
  
  .copyright {
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.6);
  }
}
</style> 